<template>
    <el-dialog  :title="title" :width="'24%'"  v-model="visible" append-to-body :lock-scroll="true" center custom-class="RegularPop group-dialog">  
        <materUpload ref="upload" v-model="form.imgList" :limit="limit" :isShowTip='false' :isdisabled="false" :dragFlag="true"  
            :extend="{groupId: groupData.id}" @UploadSuccess="UploadSuccess" :showFlag="true" :fileSize="fileSize" :fileType="fileType"
        />       
    </el-dialog>        
</template>
<script setup>
import materUpload from './imageMaterUpload.vue'
import { editResourceGroup,addResourceGroup } from "@/api/CMS/image";
const { proxy } = getCurrentInstance();
const limit = ref(5)
const visible = ref(false);
const title = ref("");
const data = reactive({
  form: {},
  groupData:JSON.parse(sessionStorage.getItem('groupData')),
});
const { form,groupData } = toRefs(data);
/** 重置操作表单 */
function reset() {
  proxy.$nextTick(() => {
    form.value = {};
  })
  form.value.imgList = ''
  form.value.id = ''
  proxy.resetForm("ruleFormRef");
}
let fileSize = ref(5)
let fileType = ref(['jpg', 'jpeg', 'png'])
// 显示弹框
function add(fileSizeValue,fileTypeValue) {
  visible.value = true;
  title.value = "上传素材";
  reset();
  fileSize.value = fileSizeValue
  fileType.value = fileTypeValue

}

/** 上传成功回调 */
function UploadSuccess() {
    proxy.$modal.msgSuccess("上传成功");
    visible.value = false;
    proxy.$emit('refresh')
};

defineExpose({
  add
});
</script>
<style lang="scss">
.RegularPop.group-dialog {
    height: auto;
    .el-dialog__body {
        padding-top: 82px;
        .el-upload.el-upload--picture-card {
            width: auto;
            height: 178px;
            border:none;
            .el-upload-dragger {
                background: #EEF7FD;
                border: 1px dashed #66C0FF;
                border-radius: 10px;     
            }    
        }        
    }
    .el-dialog__footer {
        padding-bottom: 20px;
    }
}
</style>
